<template>
  <div class="views-container">
    <div class="crud-group">
      <el-input
        v-model="paramsForm.taskDate"
        type="text"
        placeholder="请输入任务日期"
        clearable
      />
      <el-input
        v-model="paramsForm.sourceName"
        type="text"
        placeholder="请输入源名称"
        clearable
      />
      <el-input
        v-model="paramsForm.dbTbName"
        type="text"
        placeholder="请输入库表名"
        clearable
      />
      <el-select
        v-model="paramsForm.taskState"
        placeholder="状态"
        clearable
      >
        <el-option
          v-for="item in taskStateOption"
          :key="item.value"
          :label="item.label"
          :value="item.value"
        />
      </el-select>
      <el-date-picker
        v-model="paramsForm.timeRange"
        type="datetimerange"
        start-placeholder="开始时间"
        end-placeholder="结束时间"
        :default-time="['00:00:00','23:59:59']"
        clearable
      />

      <div style="display: flex">
        <el-button
          type="success"
          icon="el-icon-search"
          @click="getData"
        >
          搜索
        </el-button>
        <el-button
          type="warning"
          icon="el-icon-refresh-left"
          @click="reset"
        >
          重置
        </el-button>
        <el-button
          type="warning"
          icon="el-icon-refresh-left"
          @click="rerun"
        >
          重跑
        </el-button>
      </div>
    </div>

    <el-table
      ref="table"
      v-loading="isLoading"
      :data="data"
      border
      @selection-change="handleSelectionChange"
    >
      <el-table-column type="selection" width="55" />
      <el-table-column
        label="任务日期"
        prop="taskDate"
        sortable
        fixed
        min-width="60"
      />
      <el-table-column
        label="源名"
        prop="sourceName"
        sortable
        min-width="50"
      />
      <el-table-column
        label="库表名"
        prop="dbTbName"
        sortable
      />
      <el-table-column
        label="hdfs数量"
        prop="hdfsNumber"
        sortable
        min-width="50"
        show-overflow-tooltip
      />
      <el-table-column
        label="同步范围"
        prop="hdfsNumber"
        sortable
        show-overflow-tooltip
      >
        <template slot-scope="scope">
          <span>{{
            (!scope.row.syncRangeStartTime || !scope.row.syncRangeEndTime)
              ? ''
              :
                (scope.row.syncRangeStartTime +
                  "--" +
                  scope.row.syncRangeEndTime)
          }}</span>
        </template>
      </el-table-column>
      <el-table-column
        label="源总量"
        prop="sourceCountNumber"
        sortable
        min-width="50"
      />
      <el-table-column
        label="目标总量"
        prop="targetCountNumber"
        sortable
        min-width="50"

        show-overflow-tooltip
      />
      <el-table-column
        label="状态"
        prop="taskState"
        sortable
        min-width="50"
      >
        <template slot-scope="scope">
          <el-tag
            :type="getStateColor(scope.row.taskState)"
          >
            {{ scope.row.taskState }}
          </el-tag>
        </template>
      </el-table-column>
      <el-table-column
        label="开始时间"
        prop="startTime"
        sortable
        show-overflow-tooltip
      />
      <el-table-column
        label="结束时间"
        prop="endTime"
        sortable
        show-overflow-tooltip
      >
        <template slot-scope="scope">
          <span>{{ (scope.row.taskState && scope.row.taskState === '进行中') ? '' : scope.row.endTime }}</span>
        </template>
      </el-table-column>
      <el-table-column
        label="热备用时"
        prop="standbyTime"
        sortable
        min-width="50"
      >
        <template slot-scope="scope">
          <el-button
            type="text"
            @click="() => {
              selectedRow = scope.row;
              timeDataDialogVisible = true;
            }
            "
          >
            {{ scope.row.hotStandbyTime || 0 }}
          </el-button>
        </template> 
      </el-table-column>
      <el-table-column
        fixed="right"
        label="日志"
        width="60px"
      >
        <template slot-scope="scope">
          <el-button
            type="text"
            @click="() => {
              selectedRow = scope.row;
              downloadLog();
            }
            "
          >
            查看
          </el-button>
        </template>
      </el-table-column>
    </el-table>
    <div class="pagination-container">
      <el-pagination
        :current-page="paramsForm.current"
        :page-size="paramsForm.size"
        layout="prev, pager, next,sizes,total"
        :total="total"
        @size-change="(val)=>{
          paramsForm.current = 1
          paramsForm.size = val
          getData()
        }"
        @current-change="(val)=>{
          paramsForm.current = val
          getData(false)
        }"
      />
    </div>

    <TableNameListDialog
      :dialog-visible="timeDataDialogVisible"
      :table-name-list="selectedRow && selectedRow.hotStandbyTimeData"
      :title="'用时详情'"
      @close="
        timeDataDialogVisible = false
        selectedRow = null
      "
    />
    <TableNameListDialog
      :dialog-visible="logDialogVisible"
      :table-name-list="log"
      :title="'日志详情'"
      :width="'80%'"
      :height="500"
      @close="logDialogVisible = false"
    />
  </div>
</template>

<script>
import logAnalysisApi from '@/api/logAnalysis/index'
import dateUtils from '@/utils/date'
import TableNameListDialog from './components/TableNameListDialog.vue'

const form = {
  current: 1,
  size: 20,
  sourceName: '',
  dbTbName: '',
  taskDate: '',
  taskState: '',
  startTime: '',
  endTime: '',
  timeRange: [
    new Date(new Date().setHours(0, 0, 0, 0)),
    new Date(new Date().setHours(0, 0, 0, 0) + 24 * 60 * 60 * 1000 - 1)
  ]
}

export default {
  components: {
    TableNameListDialog
  },
  data() {
    return {
      isLoading: false,
      total: 0,
      libTotal: 0,
      selectedRow: null,
      paramsForm: { ...form },
      taskStateOption: [
        {
          label: '失败',
          value: '失败'
        },
        {
          label: '同步失败',
          value: '同步失败'
        },
        {
          label: '刷新失败',
          value: '刷新失败'
        },
        {
          label: '删除失败',
          value: '删除失败'
        },
        {
          label: '比对失败',
          value: '比对失败'
        },
        {
          label: '已完成',
          value: '已完成'
        },
        {
          label: '进行中',
          value: '进行中'
        },
        {
          label: '待执行',
          value: '待执行'
        },
        {
          label: '重跑中',
          value: '重跑中'
        }
      ],
      data: [],
      timeDataDialogVisible: false,
      logDialogVisible: false,
      log: ''
    }
  },
  created() {
    this.getData()
  },
 
  methods: {
    getStateColor(state) {
      if (state === '已完成') {
        return 'success'
      } else if (state.includes('失败')) {
        return 'danger'
      } else if (state === '进行中') {
        return ''
      } else {
        return 'warning'
      }
    },
    getData(resetPage = true) {
      if (resetPage) {
        this.paramsForm.current = 1
      }
      this.isLoading = true
      this.paramsForm.startTime = dateUtils.getDateStr(this.paramsForm.timeRange ? this.paramsForm.timeRange[0] : '')
      this.paramsForm.endTime = dateUtils.getDateStr(this.paramsForm.timeRange ? this.paramsForm.timeRange[1] : '')
      
      logAnalysisApi.getHotStandbyTable(this.paramsForm)
        .then((res) => {
          this.data = res.records
          this.total = res.total
        })
        .finally(() => {
          this.isLoading = false
        })
    },
    reset() {
      this.paramsForm = {
        ...form
      }
      this.getData()
    },
    downloadLog() {
      logAnalysisApi.download({
        logPath: this.selectedRow.logPath
      }).then((res) => {
        this.log = res
        this.logDialogVisible = true
      })
    },
    handleSelectionChange(val){
      this.multipleSelection = val
    },
    rerun(){
      if(this.multipleSelection.length>0){
          this.$notify({
            title: '成功',
            message: '重跑执行成功',
            type: 'success',
          })
        logAnalysisApi.tableRerun(this.multipleSelection).then((res)=>{
          
        })
      }else{
        this.$notify.error({
          title: '错误',
          message: '请先选择要重跑的数据',
        })
      }
    }
  }
}
</script>

